<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加角色</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="name" id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="remarkId" class="col-sm-2 control-label">描述</label>

            <div class="col-sm-10">
              <input type="text" class="form-control" name="note" id="remarkId" placeholder="描述">
            </div>
          </div>
          <div class="form-group">
				<label class="col-sm-2 control-label">授权</label>
				<div class="col-sm-10">
						<ul id="menuTree" class="ztree"></ul>
				</div>
		  </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">Cancel</button>
          <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
      </form>
    </div>
    <script type="text/javascript">
    var zTree; 
    var setting = {
   	data : {
   	    simpleData : {
   			enable : true, //使用简单数据模式
   			idKey : "id",  //节点数据中保存唯一标识的属性名称
   			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
   			rootPId : null  //根节点id
   		}
   	},
   	check:{
   		enable:true,
   		nocheckInherit:true
   	}//此配置提供复选框操作(可查官方zTree)
    }
    $(function(){
    	//异步加载菜单信息,初始化页面菜单
    	doLoadSysMenus();
    	$(".box-footer")
    	.on("click",".btn-save",doSaveOrUpdate)
    	.on("click",".btn-cancel",doCancel);
    	
    });
    function doInitEditFormData(data){
    	console.log("data",data);
    	//1.初始化角色自身信息
    	$("#nameId").val(data.name);
    	$("#remarkId").val(data.remark);
    	//2.初始化菜单信息
    	//2.1展开树节点
    	zTree.expandAll(true);
    	//2.2获取角色对应的菜单id
    	let menuIds=data.menuIds;
    	//2.3迭代所有菜单id
        menuIds.forEach((item)=>{
    	  //基于菜单id获取ztree中的node节点
            let node=
    	  zTree.getNodeByParam("id",item);
    	  //让节点选中
    	  zTree.checkNode(node,true,false);
    	})
    }
    function doCancel(){
    	let url=`/modules/sys/role_list.html`;
    	$("#mainContentId")
    	.load(url,function(){
    	  $("#mainContentId").removeData();
    	});
    }
    function doSaveOrUpdate(){
    	debugger
    	//1.参数(表单数据)
        let params=doGetEditFormData();
    	if(!params.name.trim()){
    		alert("角色名不能为空");
    		return;
    	}
    	if(params.menuIds.length==0){
    		alert("请为角色赋予权限")
    		return;
    	}
        let data=$("#mainContentId").data("data");
    	if(data)params.id=data.id;
    	//2.url
        let url=`${baseUrl}/role/`;
        let method=data?'put':'post';
    	//3.ajax request
        console.log("params",params)
        $.ajax({
            method:method,
            url:url,
            crossDomain:true,
            xhrFields:{withCredentials:true},
            data:JSON.stringify(params),
            contentType:"application/json",
            success(result){
                if(result.state==1){
                    alert(result.message);
                    doCancel();
                }else{
                    alert(result.message);
                }
            }
        })
    }
    function doGetEditFormData(){
    	//1.获取角色自身信息
    	let params={
    		name:$("#nameId").val(),
    		remark:$("#remarkId").val()
    	}
    	//2.获取选中菜单信息
        let menuIds=[];
        let checkedNodes= zTree.getCheckedNodes(true);
        checkedNodes.forEach((item=>{
            menuIds.push(item.id);
        }))
    	params.menuIds=menuIds;
    	return params;
    }
    //页面加载完成时初始化zTree
    function doLoadSysMenus(){
    	let url=`${baseUrl}/menu/treeNodes`;
    	$.ajax({url:url,crossDomain:true,xhrFields:{withCredentials: true},success(result){
    	 if(result.state==1){
    		zTree=$.fn.zTree.init(
    		$("#menuTree"),setting,result.data);
    		//修改时添加如下代码(注意先后顺序)
    		let rowData=$("#mainContentId").data("data");
    	    if(rowData)doInitEditFormData(rowData);
    	 }else{
    		alert(result.message);
    	 }
    }});
}
</script>